<template>
   <el-menu :collapse="isCollapse" :default-active="$route.path" class="el-menu-vertical-demo"
        background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
        <h3 v-show="isCollapse">菜单</h3>
        <h3 v-show="!isCollapse">客户管理系统</h3>
       <el-menu-item :index="item.path" v-for="item in noChildren" :key="item.path" @click="clickMenu(item)">
            <el-icon>
                <component :is="item.icon"></component>
            </el-icon>
            <template #title>
                <span>{{ item.label }}</span>
            </template>
        </el-menu-item>
        <el-sub-menu :index="item.label" v-for="(item, index) in hasChildren" :key="index">
            <template #title>
                <el-icon>
                    <component :is="item.icon"></component>
                </el-icon>
                <span>{{ item.label }}</span>
            </template>
            <el-menu-item-group>
                <el-menu-item :index="subItem.path" v-for="(subItem, subIndex) in item.children" :key="subIndex"
                    @click="clickMenu(subItem)">
                    <el-icon>
                        <component :is="subItem.icon"></component>
                    </el-icon>
                    <template #title>
                        <span>{{ subItem.label }}</span>
                    </template>
                </el-menu-item>
            </el-menu-item-group>
        </el-sub-menu>
    </el-menu>

</template>

<script>
import { useTabStore } from '@/stores/tab.js'

export default {
    computed: {
        noChildren() {
            return this.menu.filter(item => !item.children);
        },
        hasChildren() {
            return this.menu.filter(item => item.children);
        },
        isCollapse() {
            // console.log("^^^^",this.tab.isCollapse)
            return this.tab.isCollapse;
            // return false;
        },
        menu() {
            // return this.$store.state.tab.menu
            return this.asideMenu
        }
    },
    data() {
        return {
            tab: useTabStore(),
            asideMenu: [
                {
                    path: "/home",
                    name: "home",
                    label: "客户管理",
                    icon: "House"
                },
                {
                    path: "/about",
                    name: "about",
                    label: "客户统计",
                    icon: "User"
                },
            ]
        }
    },
    methods: {
        clickMenu(item) {
            this.$router.push({ path: item.path });
            this.tab.selectMenu(item)

        }
    },

}
</script>

<style lang="scss" scoped>
.el-menu {
    height: 100%;
    border: none;

    h3 {
        color: #ffffff;
        text-align: center;
        line-height: 48px;
    }
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 300px;
}
</style>